<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Tabs</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tabs/vista/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .DemoBlock
    {
      border: 1px solid #D0D0D0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      border-radius: 3px;
      padding: 15px;
      margin: 0 0 .5em 10px;
      overflow: hidden;
      position: relative;
    }
    .DemoBlock H2
    {
      font-size: 80%;
      font-weight: normal;
      background: #EEE;
      margin: -15px -15px 10px -15px;
      padding: 2px;
      text-align: center;
    }
    
    .Basis-AccordionControl .Basis-Page
    {
      height: 120px;
      overflow: auto;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Tabs</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">

    basis.require('basis.dom');
    basis.require('basis.cssom');
    basis.require('basis.ui.tabs');
    
    // import names
    var DOM = basis.dom;
    var cssom = basis.cssom;
    var Tabs = basis.ui.tabs;
    var getter = Function.getter;

    //
    // Main part
    //

    function createBlock(header){
      return DOM.insert(DOM.get('demo-container'), DOM.createElement('.DemoBlock', DOM.createElement('H2', header)));
    }

    // Data source
    var data = [
      { data: { title: 'tab4' }, groupId: 3, content: 'content 4' },
      { data: { title: 'tab1' }, groupId: 1, content: 'content 1' },
      { data: { title: 'tab6' }, groupId: 3, content: 'content 6' },
      { data: { title: 'tab5' }, groupId: 3, content: 'content 5 '.repeat(100) },
      { data: { title: 'tab3' }, groupId: 2, content: 'content 3', selected: true  },
      { data: { title: 'tab2' }, groupId: 2, content: 'content 2', disabled: true  },
      { data: { title: 'tab7' }, groupId: 3, content: 'content 7' }
    ];


    // AccordionControl
    new Tabs.AccordionControl({
      container: cssom.setStyle(createBlock('AccordionControl'), { 'float': 'right', width: '250px' }),
      childNodes: data
    });

    // AccordionControl with sorting & grouping
    new Tabs.AccordionControl({
      container: cssom.setStyle(createBlock('AccordionControl with sorting & grouping'), { 'float': 'right', width: '250px' }),
      grouping: {
        groupGetter: getter('groupId'),
        sorting: getter('data.title')
      },
      sorting: getter('data.title'),
      childNodes: data
    });

    // TabControl
    new Tabs.TabControl({
      container: createBlock('TabControl'),
      childNodes: data
    });

    // TabControl with sorting & grouping
    new Tabs.TabControl({
      container: createBlock('TabControl with sorting & grouping'),
      grouping: {
        groupGetter: getter('groupId'),
        sorting: getter('data.title')
      },
      sorting: getter('data.title'),
      childNodes: data
    });

    // PageControl
    var container = createBlock('PageControl');
    var buttonPanel = DOM.createElement();
    DOM.insert(container, DOM.createElement('', 'Show page: ', buttonPanel));

    new Tabs.PageControl({
      container: container,
      handler: {
        childNodesModified: function(){
          var pagecontrol = this;
          DOM.insert(DOM.clear(buttonPanel), this.childNodes.map(function(page, index){
            var button = page.button;

            if (!button)
            {
              page.button = button = DOM.createElement(
                {
                  description: 'BUTTON',
                  click: function(){
                    var page = pagecontrol.childNodes[index];
                    if (!page.disabled)
                      page.select();
                    else
                      alert('page with title ' + (page.data.title) + ' is disabled and can\'t be selected');
                  }
                },
                page.data.title
              );
            }

            return button;
          }));
        }
      },
      childNodes: data
    });

    // TabSheetControl
    new Tabs.TabSheetControl({
      container: createBlock('TabSheetControl'),
      childNodes: data
    });

    // TabSheetControl with sorting & grouping
    new Tabs.TabSheetControl({
      container: createBlock('TabSheetControl with sorting & grouping'),
      grouping: {
        groupGetter: getter('groupId'),
        sorting: getter('data.title')
      },
      sorting: getter('data.title'),
      childNodes: data
    });

  </script>
</body>

</html>
